<template>
	<view style="background: #AEE2DA;min-height: 100vh;" class="Afont"
		:style="{background:'url('+Imgbase+'/new_goodday_bgc3n.png)','background-size':'100%',}">
		<view class="padding-top-50 padding-left-40">
			<image class="w-80 h-80" :src="Imgbase + '/new_goodlx_img1.png'" mode="aspectFit" @click="back">
			</image>
		</view>

		<view class="padding-top-310 padding-left-120 padding-right-80">
			<view class="box_one w-300 padding-bottom-5 text-center margin-auto">
				<input type="text" placeholder="请输入对方id" placeholder-style="color:#5c4228;" v-model="name" />
			</view>

			<view class="w-250 margin-auto padding-top-50">
				<u-button :text="dtext" color="#F38948" @click="chooseshow = true"></u-button>
			</view>

			<view class="w-250 margin-auto padding-top-100">
				<u-button text="确定" color="#FF4D5A" @click="giftCoupon"></u-button>
			</view>
		</view>

		<view class="padding-top-300">

			<scroll-view scroll-y class="w100 h-340" scroll-with-animation style="overflow: hidden;"
				@scrolltolower="onbottom()">

				<view class="h-200 padding-top-50 w-570 margin-auto margin-top-25 padding-left-30 padding-right-30"
					v-for="(item,index) in userlist" :key="index"
					:style="{background:'url('+Imgbase+'/app_sign_c_middle2.png)','background-size':'100% 100%',}">
					<view class="text-sm" style="padding-left: 20upx;padding-right: 20upx;color: #5c4228;">
						<view class="content fl text-ablack text-df">
							获得:
						</view>
						<view class="action fr text-df text-red">
							{{item.title}}
						</view>
					</view>
					<view style="clear: both;"></view>
					<view class="text-sm font-22 padding-left-20 padding-top-15" style="color: #5c4228;">
						<view class="content  text-ablack ">
							获得时间: {{item.get_at}}
						</view>
						<view class="action  text-ablack padding-top-8">
							到期时间: {{item.end_at}}
						</view>
					</view>
				</view>

			</scroll-view>
		</view>

		<!-- 恭喜获得 -->
		<view class="cu-modal" :class="modalName=='buyModal'?'show':''" @tap="hideModal" @tap.stop="">
			<view class="cu-dialog" style="background-color:initial;margin-top: 100rpx;width: 90%;height: 70%;"
				:style="{background:'url('+Imgbase+'/new1_infinite_boxtanchuangbgc.png) no-repeat','background-size':'100% 100%'}">

				<view class="padding-top-250 padding-left-70 padding-right-100 overhid h-900">

					<view class="fl margin-right-25 margin-bottom-20" v-for="(item,index) in list" :key="index">
						<view class="w-150 h-150" style="position: relative;">
							<image class="w100 h100 radius-15" :src="item.image" mode="aspectFill"></image>

							<view class="bynum" v-if="item.num > 1">
								x{{item.num}}
							</view>
						</view>

						<view class="font-26 padding-top-8">
							{{item.title}}
						</view>
					</view>
				</view>

				<view class="w-250 margin-auto">
					<u-button text="确定" color="#F38948"></u-button>
				</view>
			</view>
		</view>

		<u-popup :show="chooseshow" @close="close" mode="center" round="15" closeable>
			<view class="padding-50 radius-15 w-650 h-900">
				<view class="text-center font-30 padding-top-80" v-if="coupontype == 0">
					暂无可赠送优惠券
				</view>

				<view class="" v-else>
					<scroll-view scroll-y class="w100 h-800" scroll-with-animation style="overflow: hidden;"
						@scrolltolower="onbottomcoupon()">
						<view
							class="h-200 padding-top-50 w-570 margin-auto margin-top-25 padding-left-30 padding-right-30"
							v-for="(item,index) in couponlist" :key="index" @click="choosecoupon(index)"
							v-if="item.from_id == 0"
							:style="{background:'url('+Imgbase+'/app_sign_c_middle2.png)','background-size':'100% 100%',}">
							<view class="text-sm" style="padding-left: 20upx;padding-right: 20upx;color: #5c4228;">
								<view class="action text-df text-red">
									{{item.title}}
								</view>
							</view>
							<view style="clear: both;"></view>
							<view class="text-sm font-22 padding-left-20 padding-top-15" style="color: #5c4228;">
								<view class="content  text-ablack ">
									获得时间: {{item.get_at}}
								</view>
								<view class="action  text-ablack padding-top-8">
									到期时间: {{item.end_at}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				day: 0,
				issigned: 0,
				scoreData: true,
				scorelist: [],
				scorepage: 1,
				scorecount: 0,
				mes: '',
				modalName: '',
				scroll: 0,
				list: [],
				userlist: [],
				couponlist: [],
				page: 1,
				res: -1,
				chooseshow: false,
				dtext: '选择转赠优惠券',
				couponid: 0,
				name: '',
				couponpage: 1,
				coupontype: 0
			};
		},
		onShow() {
			this.isSign()
			this.userCoupon()
			this.userCoupon1()
		},
		methods: {
			// 转赠优惠券
			async giftCoupon() {
				let _this = this;

				if (_this.name == '') {
					this.$refs.uToast.show({
						message: "请输入对方id"
					})
					return
				}

				if (_this.couponid == 0) {
					this.$refs.uToast.show({
						message: "请选择转赠优惠券"
					})
					return
				}

				let item = await this.$api.post('user/giftCoupon', {
					token: uni.getStorageSync('token'),
					ccoupon_id: _this.couponid,
					to_uname: _this.name,
					// limit: 2
				})

				if (item.code == 1) {
					this.$refs.uToast.show({
						message: item.msg
					})

					_this.couponlist = []
					_this.userCoupon1()
				}
			},
			// 选择优惠券
			choosecoupon(i) {
				this.chooseshow = false
				var item = this.couponlist[i]
				this.dtext = item.title
				this.couponid = item.id
			},
			// 查看可转赠优惠券
			async userCoupon1() {
				let _this = this;
				let item = await this.$api.post('user/userCoupon', {
					token: uni.getStorageSync('token'),
					type: 1,
					page: this.couponpage,
					// limit: 2
				})
				_this.couponlist = _this.couponlist.concat(item.data.list)

				let num = 0
				_this.couponlist.forEach((i, d) => {
					if (i.from_id == 0) {
						num++
					}
				})
				this.coupontype = num
			},
			// 关闭选择优惠券弹窗
			close() {
				this.chooseshow = false
			},
			// 优惠券分页
			onbottomcoupon() {
				this.couponpage++
				this.userCoupon1()
			},
			// 优惠券记录分页
			onbottom() {
				this.page++
				this.userCoupon()
			},
			// 查看转赠优惠券记录
			async userCoupon() {
				let _this = this;
				let item = await this.$api.post('user/userCoupon', {
					token: uni.getStorageSync('token'),
					type: 4,
					page: this.page,
					// limit: 2
				})
				_this.userlist = _this.userlist.concat(item.data.list)

			},
			// 检测签到
			async isSign() {
				let _this = this;
				let item = await this.$api.post('usersys/isSign', {
					token: uni.getStorageSync('token'),
				})
				_this.res = item.data.res
				_this.day = item.data.count

			},
			// 签到
			async postSign() {
				let _this = this;
				let item = await this.$api.post('usersys/postSign', {
					token: uni.getStorageSync('token'),
				})

				// 判断签到有无奖励
				if (item.data.list.length > 0) {
					this.list = item.data.list
					this.modalName = 'buyModal'
					this.page = 1
					_this.userlist = []
					this.userCoupon()
				} else {
					uni.showToast({
						icon: 'none',
						title: item.msg
					});
				}

				_this.isSign()
			},
			back() {
				uni.navigateBack()
			},
			hideModal(e) {
				this.modalName = null
			},
		}

	}
</script>
<style lang="less" scoped>
	.box_one {
		border-bottom: 4rpx solid #5c4228;
	}

	.bynum {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
	}

	.jiitem {
		float: left;
		margin-right: 20rpx;
		margin-bottom: 22rpx;
		position: relative;

		.opc {
			position: absolute;
			z-index: 10;
			background-color: rgba(0, 0, 0, .4);
			top: 2.5%;
			left: 2.5%;
			width: 95%;
			height: 95%;
		}

		.opc1 {
			position: absolute;
			z-index: 10;
			background-color: rgba(0, 0, 0, .4);
			top: 2.5%;
			left: 2%;
			width: 96%;
			height: 95%;
		}

		.zin {
			position: relative;
			z-index: 11;
		}
	}

	.jiitem:nth-child(4) {
		margin-right: 0;
	}

	.jiitem:nth-child(7) {
		margin-right: 0;
	}

	.scoity-center-day {
		color: #f9a24b;
		background-color: rgba(255, 255, 255, .8);
	}

	.scoity-center-qiandao {
		margin-top: 60rpx;
	}

	.scoity-center-qiandao-text {
		font-size: 32rpx;
		text-decoration: underline;
		color: #FFFFFF;
		text-align: center;

	}
</style>